// src/pages/Users.js
import React, { useState, useEffect } from 'react';
import { Table, Button } from 'antd';
import axios from 'axios';


const Users = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);



    const fetchUsers = async () => {
        setLoading(true);
        try {
            const response = await axios.get('/api/users');
            setUsers(response.data.users);
        } catch (error) {
            console.error('获取用户列表失败', error);
        } finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        fetchUsers();
    }, []);

    const columns = [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '邮箱', dataIndex: 'email', key: 'email' },
        { title: '角色', dataIndex: 'role', key: 'role' },
        { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <span>
                    <Button size="small">编辑</Button>
                    <Button size="small" danger style={{ marginLeft: 8 }}>
                        禁用
                    </Button>
                </span>
            ),
        },
    ];

    return (
        <div>
            <Table
                dataSource={users}
                columns={columns}
                loading={loading}
                rowKey="id"
            />
        </div>
    );
};

export default Users;